<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>Theme Documentation - Content | Ahhh.fun</title>
        <meta name="Description" content="Find out how to create and organize your content quickly and intuitively in LoveIt theme."><meta property="og:title" content="Theme Documentation - Content" />
<meta property="og:description" content="Find out how to create and organize your content quickly and intuitively in LoveIt theme." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://ainy.gitee.io/en/theme-documentation-content/" />
<meta property="article:published_time" content="2020-03-05T15:58:26+08:00" />
<meta property="article:modified_time" content="2020-04-19T21:19:34+08:00" /><meta property="og:site_name" content="Ahhh.fun" />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Theme Documentation - Content"/>
<meta name="twitter:description" content="Find out how to create and organize your content quickly and intuitively in LoveIt theme."/>
<meta name="theme-color" content="#ffffff">
<meta name="msapplication-TileColor" content="#da532c">
<link rel="canonical" href="https://ainy.gitee.io/en/theme-documentation-content/" />
<link rel="shortcut icon" type="image/x-icon" href="https://ainy.gitee.io/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="https://ainy.gitee.io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://ainy.gitee.io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://ainy.gitee.io/favicon-16x16.png">
<link rel="manifest" href="https://ainy.gitee.io/site.webmanifest">
<link rel="mask-icon" href="https://ainy.gitee.io/safari-pinned-tab.svg" color="#5bbad5"><link rel="prev" href="https://ainy.gitee.io/en/basic-markdown-syntax/" /><link rel="next" href="https://ainy.gitee.io/en/theme-documentation-basics/" /><link rel="stylesheet" href="https://ainy.gitee.io/lib/fontawesome-free/all.min.css"><link rel="stylesheet" href="https://ainy.gitee.io/lib/animate/animate.min.css"><link rel="stylesheet" href="https://ainy.gitee.io/css/style.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "Theme Documentation - Content",
        "inLanguage": "en",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/ainy.gitee.io\/en\/theme-documentation-content\/"
        },"image": {
                "@type": "ImageObject",
                "url": "https:\/\/ainy.gitee.io\/cover.png",
                "width":  800 ,
                "height":  600 
            },"genre": "posts","keywords": "content, markdown","wordcount":  1300 ,
        "url": "https:\/\/ainy.gitee.io\/en\/theme-documentation-content\/","datePublished": "2020-03-05","dateModified": "2020-04-19","license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","publisher": {
                "@type": "Organization",
                "name": "Jie",
                "logo": {
                "@type": "ImageObject",
                "url": "https:\/\/ainy.gitee.io\/logo.png",
                "width":  127 ,
                "height":  40 
                }
            },"author": {
                "@type": "Person",
                "name": "Dillon"
            },"description": "Find out how to create and organize your content quickly and intuitively in LoveIt theme."
    }
    </script></head>
    <body><script>
            if (!window.localStorage || !window.localStorage.getItem('theme')) {window.isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;} else {
                window.isDark = (window.localStorage && window.localStorage.getItem('theme')) === 'dark';
            }
            window.isDark && document.body.classList.add('dark-theme');
        </script><div class="wrapper"><header class="desktop" id="header-desktop">
    <div class="header-wrapper">
        <div class="header-title">
            <a href="https://ainy.gitee.io/en/">Ahhh.fun</a>
        </div>
        <div class="menu"><a class="menu-item" href="https://ainy.gitee.io/en/posts/" rel="noopener noreffer">Posts</a><a class="menu-item" href="https://ainy.gitee.io/en/tags/" rel="noopener noreffer">Tags</a><a class="menu-item" href="https://ainy.gitee.io/en/categories/" rel="noopener noreffer">Categories</a><a class="menu-item" href="https://ainy.gitee.io/en/categories/documentation/" rel="noopener noreffer">Docs</a><a class="menu-item" href="https://ainy.gitee.io/en/about/" rel="noopener noreffer">About</a><a class="menu-item" href="https://gitee.com/ainy/ainy" title="GitHub" rel="noopener noreffer" target="_blank"><i class='fab fa-github fa-fw'></i></a><span class="menu-item">|</span>
            <a href="javascript:void(0);" class="menu-item theme-switch" title="Switch Theme">
                <i class="fas fa-adjust fa-fw"></i>
            </a><a href="javascript:void(0);" class="menu-item" title="Select Language">English<i class="fas fa-chevron-right fa-fw"></i>
                    <select class="language-select" id="language-select-desktop" onchange="location = this.value;"><option value="/en/theme-documentation-content/" selected>English</option><option value="/theme-documentation-content/">简体中文</option><option value="/fr/theme-documentation-content/">Français</option></select>
                </a></div>
    </div>
</header><header class="mobile" id="header-mobile">
    <div class="header-wrapper">
        <div class="header-container">
            <div class="header-title">
                <a href="https://ainy.gitee.io/en/">Ahhh.fun</a>
            </div>
            <div class="menu-toggle" id="menu-toggle-mobile">
                <span></span><span></span><span></span>
            </div>
        </div>
        <div class="menu" id="menu-mobile"><a class="menu-item" href="https://ainy.gitee.io/en/posts/" title="" rel="noopener noreffer">Posts</a><a class="menu-item" href="https://ainy.gitee.io/en/tags/" title="" rel="noopener noreffer">Tags</a><a class="menu-item" href="https://ainy.gitee.io/en/categories/" title="" rel="noopener noreffer">Categories</a><a class="menu-item" href="https://ainy.gitee.io/en/categories/documentation/" title="" rel="noopener noreffer">Docs</a><a class="menu-item" href="https://ainy.gitee.io/en/about/" title="" rel="noopener noreffer">About</a><a class="menu-item" href="https://gitee.com/ainy/ainy" title="GitHub" rel="noopener noreffer" target="_blank"><i class='fab fa-github fa-fw'></i></a><a href="javascript:void(0);" class="menu-item theme-switch" title="Switch Theme">
                <i class="fas fa-adjust fa-fw"></i>
            </a><a href="javascript:void(0);" class="menu-item" title="Select Language">English<i class="fas fa-chevron-right fa-fw"></i>
                    <select class="language-select" onchange="location = this.value;"><option value="/en/theme-documentation-content/" selected>English</option><option value="/theme-documentation-content/">简体中文</option><option value="/fr/theme-documentation-content/">Français</option></select>
                </a></div>
    </div>
</header>

<script>
    window.desktopHeaderMode = "fixed";
    window.mobileHeaderMode = "auto";
</script>
<main class="main">
                <div class="container"><article class="page single"><h1 class="single-title animated flipInX">Theme Documentation - Content</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="https://dillonzq.com" title="Author" target="_blank" rel="noopener noreffer author" class="author"><i class="fas fa-user-circle fa-fw"></i>Dillon</a>
</span>&nbsp;
                    <span class="post-category">included in<a href="https://ainy.gitee.io/en/categories/documentation">
                                <i class="far fa-folder fa-fw"></i>Documentation
                            </a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i><time datetime=2020-03-05>2020-03-05</time>&nbsp;
                <i class="fas fa-pencil-alt fa-fw"></i>about 1300 words&nbsp;
                <i class="far fa-clock fa-fw"></i>7 min&nbsp;<span id="/en/theme-documentation-content/" class="leancloud_visitors" data-flag-title="Theme Documentation - Content">
                        <i class="far fa-eye fa-fw"></i><span class=leancloud-visitors-count></span>&nbsp;views
                    </span>&nbsp;</div>
        </div><div class="featured-image"><img
        class="lazyload"
        src="https://ainy.gitee.io/svg/loading.min.svg"
        data-sizes="auto"
        data-srcset="https://ainy.gitee.io/images/theme-documentation-content/featured-image.jpg, https://ainy.gitee.io/images/theme-documentation-content/featured-image.jpg 1.5x, https://ainy.gitee.io/images/theme-documentation-content/featured-image.jpg 2x"
        data-src="https://ainy.gitee.io/images/theme-documentation-content/featured-image.jpg"
        alt="Find out how to create and organize your content quickly and intuitively in LoveIt theme."
        title="Find out how to create and organize your content quickly and intuitively in LoveIt theme." /></div><div class="toc" id="toc-auto">
                <h2 class="toc-title">Contents</h2>
                <div class="toc-content always-active" id="toc-content-auto"></div>
            </div>
            <div class="toc" id="toc-static">
                <details>
                    <summary>
                        <div class="toc-title">
                            <span>Contents</span>
                            <span><i class="details icon fas fa-angle-down"></i></span>
                        </div>
                    </summary>
                    <div class="toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li><a href="#1-contents-organization">1 Contents Organization</a></li>
    <li><a href="#2-front-matter">2 Front Matter</a></li>
    <li><a href="#3-content-summaries">3 Content Summaries</a>
      <ul>
        <li><a href="#automatic-summary-splitting">Automatic Summary Splitting</a></li>
        <li><a href="#manual-summary-splitting">Manual Summary Splitting</a></li>
        <li><a href="#front-matter-summary">Front Matter Summary</a></li>
        <li><a href="#use-description-as-summary">Use Description as Summary</a></li>
        <li><a href="#priority-order-of-summary-selection">Priority Order of Summary Selection</a></li>
      </ul>
    </li>
    <li><a href="#4-basic-markdown-syntax">4 Basic Markdown Syntax</a></li>
    <li><a href="#extended-markdown-syntax">5 Extended Markdown Syntax</a>
      <ul>
        <li><a href="#emoji-support">Emoji Support</a></li>
        <li><a href="#mathematical-formula">Mathematical Formula</a>
          <ul>
            <li><a href="#block-formula">Block Formula</a></li>
            <li><a href="#inline-formula">Inline Formula</a></li>
            <li><a href="#copy-tex">Copy-tex</a></li>
            <li><a href="#mhchem">mhchem</a></li>
          </ul>
        </li>
        <li><a href="#ruby-annotation">Ruby Annotation</a></li>
        <li><a href="#font-awesome">Font Awesome</a></li>
        <li><a href="#escape-character">Escape character</a></li>
      </ul>
    </li>
  </ul>
</nav></div>
                </details>
            </div><div class="content" id="content"><p>Find out how to create and organize your content quickly and intuitively in <strong>LoveIt</strong> theme.</p>
<h2 id="1-contents-organization">1 Contents Organization</h2>
<p>A few suggestions to help you get a good looking site quickly:</p>
<ul>
<li>Keep post pages in the <code>content/posts</code> directory, for example: <code>content/posts/my-first-post.md</code></li>
<li>Keep static pages in the <code>content</code> directory, for example: <code>content/about.md</code></li>
<li>Keep media like images in the <code>static</code> directory, for example: <code>static/images/screenshot.png</code></li>
</ul>
<h2 id="2-front-matter">2 Front Matter</h2>
<p><strong>Hugo</strong> allows you to add front matter in <code>yaml</code>, <code>toml</code> or <code>json</code> to your content files.</p>
<p>Here is a default front matter from the default archetype:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-yaml" data-lang="yaml">---<span class="w">
</span><span class="w"></span><span class="k">title</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;My First Post&#34;</span><span class="w">
</span><span class="w"></span><span class="k">date</span><span class="p">:</span><span class="w"> </span><span class="ld">2020-03-04T15:58:26</span><span class="m">+08</span><span class="p">:</span><span class="m">00</span><span class="w">
</span><span class="w"></span><span class="k">lastmod</span><span class="p">:</span><span class="w"> </span><span class="ld">2020-03-04T15:58:26</span><span class="m">+08</span><span class="p">:</span><span class="m">00</span><span class="w">
</span><span class="w"></span><span class="k">draft</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w"></span><span class="k">author</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span><span class="w"></span><span class="k">authorLink</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span><span class="w"></span><span class="k">description</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span><span class="w"></span><span class="k">license</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span><span class="w">
</span><span class="w"></span><span class="k">tags</span><span class="p">:</span><span class="w"> </span><span class="p">[]</span><span class="w">
</span><span class="w"></span><span class="k">categories</span><span class="p">:</span><span class="w"> </span><span class="p">[]</span><span class="w">
</span><span class="w"></span><span class="k">hiddenFromHomePage</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span><span class="w">
</span><span class="w"></span><span class="k">featuredImage</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span><span class="w"></span><span class="k">featuredImagePreview</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span><span class="w">
</span><span class="w"></span><span class="k">toc</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span><span class="w"></span><span class="k">autoCollapseToc</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w"></span><span class="k">math</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w"></span><span class="k">lightgallery</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w"></span><span class="k">linkToMarkdown</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w"></span>share<span class="p">:</span><span class="w">
</span><span class="w">  </span><span class="k">enable</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w"></span><span class="k">comment</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w"></span>---<span class="w">
</span></code></pre></td></tr></table>
</div>
</div><ul>
<li><strong>title</strong>: the title for the content.</li>
<li><strong>date</strong>: the datetime assigned to this page, which is usually fetched from the <code>date</code> field in front matter, but this behaviour is configurabl in the <a href="../theme-documentation-basics/#site-configuration" rel="noopener noreffer">site configuration</a>
.</li>
<li><strong>lastmod</strong>: the datetime at which the content was last modified.</li>
<li><strong>draft</strong>: if <code>true</code>, the content will not be rendered unless the <code>--buildDrafts</code>/<code>-D</code> flag is passed to the <code>hugo</code> command.</li>
<li><strong>author</strong>: the author for the content.</li>
<li><strong>authorLink</strong>: the link of the author.</li>
<li><strong>description</strong>: the description for the content.</li>
<li><strong>license</strong>: the special lisence for this content.</li>
<li><strong>tags</strong>: the tags for the content.</li>
<li><strong>categories</strong>: the categories for the content.</li>
<li><strong>hiddenFromHomePage</strong>: if <code>true</code>, the content will not be shown in the home page, but this behaviour is configurabl in the <a href="../theme-documentation-basics/#site-configuration" rel="noopener noreffer">site configuration</a>
.</li>
<li><strong>featuredImage</strong>: the featured image for the content.</li>
<li><strong>featuredImagePreview</strong>: the featured image for the content preview in the home page.</li>
<li><strong>toc</strong>: if <code>true</code>, the content will show the table of the contents.</li>
<li><strong>autoCollapseToc</strong>: if <code>true</code>, the table of the contents will be automatically collapsed.</li>
<li><strong>math</strong>: if <code>true</code>, the mathematical formula in the content will be automatically rendered.</li>
<li><strong>lightgallery</strong>: if <code>true</code>, images in the content will be shown as the gallery.</li>
<li><strong>linkToMarkdown</strong>: if <code>true</code>, the footer of the content will show the link to the orignal Markdown file.</li>
<li><strong>share</strong>: the same as <code>params.share</code> in the <a href="../theme-documentation-basics/#site-configuration" rel="noopener noreffer">site configuration</a>
.</li>
<li><strong>comment</strong>: if <code>true</code>, the comment will be used.</li>
</ul>
<h2 id="3-content-summaries">3 Content Summaries</h2>
<p><strong>LoveIt</strong> theme uses the summary of the content to display abstract information in the home page. Hugo can generate summaries of your content.</p>
<p><figure><a class="lightgallery" href="https://ainy.gitee.io/images/theme-documentation-content/summary.jpg" title="Summary Preview" data-thumbnail="/images/theme-documentation-content/summary.jpg" data-sub-html="<h2>Summary Preview</h2><p>Summary Preview</p>">
        <img
            class="lazyload"
            src="https://ainy.gitee.io/svg/loading.min.svg"
            data-sizes="auto"
            data-srcset="https://ainy.gitee.io/images/theme-documentation-content/summary.jpg, https://ainy.gitee.io/images/theme-documentation-content/summary.jpg 1.5x, https://ainy.gitee.io/images/theme-documentation-content/summary.jpg 2x"
            data-src="https://ainy.gitee.io/images/theme-documentation-content/summary.jpg"
            alt="Summary Preview" />
    </a><figcaption class="image-caption">Summary Preview</figcaption>
    </figure></p>
<h3 id="automatic-summary-splitting">Automatic Summary Splitting</h3>
<p>By default, Hugo automatically takes the first 70 words of your content as its summary.</p>
<p>You may customize the summary length by setting <code>summaryLength</code> in the <a href="../theme-documentation-basics/#site-configuration" rel="noopener noreffer">site configuration</a>
.</p>
<p>If you are creating content in a <strong><ruby>CJK<rt>Chinese/Japanese/Korean</rt></ruby></strong> language and want to use Hugo’s automatic summary splitting, set <code>hasCJKLanguage</code> to <code>true</code> in your <a href="../theme-documentation-basics/#site-configuration" rel="noopener noreffer">site configuration</a>
.</p>
<h3 id="manual-summary-splitting">Manual Summary Splitting</h3>
<p>Alternatively, you may add the <code>&lt;!--more--&gt;</code> summary divider where you want to split the article.</p>
<p>Content that comes before the summary divider will be used as that content’s summary.</p>
<div class="admonition note">
            <p class="admonition-title"><i class="icon fas fa-pencil-alt"></i>Note</p>
            <div class="admonition-content">Be careful to enter <code>&lt;!--more--&gt;</code> exactly; i.e., all lowercase and with no whitespace.</div>
        </div>
<h3 id="front-matter-summary">Front Matter Summary</h3>
<p>You might want your summary to be something other than the text that starts the article. In this case you can provide a separate summary in the <code>summary</code> variable of the article front matter.</p>
<h3 id="use-description-as-summary">Use Description as Summary</h3>
<p>You might want your description in the <code>description</code> variable of the article front matter as the summary.</p>
<p>You may add the <code>&lt;!--more--&gt;</code> summary divider at the start of the article. Keep content that comes before the summary divider empty. Then <strong>LoveIt</strong> theme will use your description as the summary.</p>
<h3 id="priority-order-of-summary-selection">Priority Order of Summary Selection</h3>
<p>Because there are multiple ways in which a summary can be specified it is useful to understand the order. It is as follows:</p>
<ol>
<li>If there is a <code>&lt;!--more--&gt;</code> summary divider present in the article but no content is before the divider, the description will be used as the summary.</li>
<li>If there is a <code>&lt;!--more--&gt;</code> summary divider present in the article the text up to the divider will be provided as per the manual summary split method.</li>
<li>If there is a summary variable in the article front matter the value of the variable will be provided as per the front matter summary method.</li>
<li>The text at the start of the article will be provided as per the automatic summary split method.</li>
</ol>
<div class="admonition note">
            <p class="admonition-title"><i class="icon fas fa-pencil-alt"></i>Note</p>
            <div class="admonition-content">It is not recommended to include rich text block elements in the summary, which will cause typographic errors. Such as code blocks, pictures, tables, etc.</div>
        </div>
<h2 id="4-basic-markdown-syntax">4 Basic Markdown Syntax</h2>
<p>This part is shown in the <a href="../basic-markdown-syntax/" rel="noopener noreffer">basic markdown syntax page</a>
.</p>
<h2 id="extended-markdown-syntax">5 Extended Markdown Syntax</h2>
<p><strong>LoveIt</strong> theme has some extended syntax elements for you to write articles.</p>
<h3 id="emoji-support">Emoji Support</h3>
<p>This part is shown in the <a href="../emoji-support/" rel="noopener noreffer">emoji support page</a>
.</p>
<h3 id="mathematical-formula">Mathematical Formula</h3>
<p><strong>LoveIt</strong> theme supports mathematical formulas based on <a href="https://katex.org/" target="_blank" rel="noopener noreffer">$ \KaTeX $</a>
.</p>
<p>Set the property <code>enable = true</code> under <code>[params.math]</code> in your <a href="../theme-documentation-basics/#site-configuration" rel="noopener noreffer">site configuration</a>

and the property <code>math: true</code> of the article front matter to enable the automatic rendering of mathematical formulas.</p>
<div class="admonition tip">
            <p class="admonition-title"><i class="icon fas fa-lightbulb"></i>Tip</p>
            <div class="admonition-content">Here is a list of <a href="https://katex.org/docs/supported.html" target="_blank" rel="noopener noreffer">$ \TeX $ functions supported by $ \KaTeX $</a>
.</div>
        </div>
<h4 id="block-formula">Block Formula</h4>
<p>The default block delimiters are <code>$$</code>/<code>$$</code> and <code>\\[</code>/<code>\\]</code>:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">$$ c = \pm\sqrt{a^2 + b^2} $$

\\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\]
</code></pre></td></tr></table>
</div>
</div><p>The rendered output looks like this:</p>
<p>$$ c = \pm\sqrt{a^2 + b^2} $$</p>
<p>\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \]</p>
<h4 id="inline-formula">Inline Formula</h4>
<p>The default block delimiters are <code>$</code>/<code>$</code> and <code>\\(</code>/<code>\\)</code>:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">$ c = \pm\sqrt{a^2 + b^2} $ and \\( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\)
</code></pre></td></tr></table>
</div>
</div><p>The rendered output looks like this:</p>
<p>$ c = \pm\sqrt{a^2 + b^2} $ and \( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \)</p>
<div class="admonition tip">
            <p class="admonition-title"><i class="icon fas fa-lightbulb"></i>Tip</p>
            <div class="admonition-content">You can add more block and inline delimiters in your <a href="../theme-documentation-basics/#site-configuration" rel="noopener noreffer">site configuration</a>
.</div>
        </div>
<h4 id="copy-tex">Copy-tex</h4>
<p><strong><a href="https://github.com/Khan/KaTeX/tree/master/contrib/copy-tex" target="_blank" rel="noopener noreffer">Copy-tex</a>
</strong> is an extension for <strong>$ \KaTeX $</strong>.</p>
<p>By the extension, when selecting and copying $ \KaTeX $ rendered elements, copies their $ \LaTeX $ source to the clipboard.</p>
<p>Set the property <code>copyTex = true</code> under <code>[params.math]</code> in your <a href="../theme-documentation-basics/#site-configuration" rel="noopener noreffer">site configuration</a>
 to enable Copy-tex.</p>
<p>Select and copy the formula rendered in the previous section, and you can find that the copied content is the LaTeX source code.</p>
<h4 id="mhchem">mhchem</h4>
<p><strong><a href="https://github.com/Khan/KaTeX/tree/master/contrib/mhchem" target="_blank" rel="noopener noreffer">mhchem</a>
</strong> is an extension for <strong>$ \KaTeX $</strong>.</p>
<p>By the extension, you can write beautiful chemical equations easily in the article.</p>
<p>Set the property <code>mhchem = true</code> under <code>[params.math]</code> in your <a href="../theme-documentation-basics/#site-configuration" rel="noopener noreffer">site configuration</a>
 to enable mhchem.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">$$ \ce{CO2 + C -&gt; 2 CO} $$

$$ \ce{Hg^2+ -&gt;[I-] HgI2 -&gt;[I-] [Hg^{II}I4]^2-} $$
</code></pre></td></tr></table>
</div>
</div><p>The rendered output looks like this:</p>
<p>$$ \ce{CO2 + C -&gt; 2 CO} $$</p>
<p>$$ \ce{Hg^2+ -&gt;[I-] HgI2 -&gt;[I-] [Hg^{II}I4]^2-} $$</p>
<h3 id="ruby-annotation">Ruby Annotation</h3>
<p>An extended Markdown syntax for <strong>ruby annotation</strong> is supported in <strong>LoveIt</strong> theme:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">[Hugo]^(An open-source static site generator)
</code></pre></td></tr></table>
</div>
</div><p>The rendered output looks like this:</p>
<p><strong><ruby>Hugo<rt>An open-source static site generator</rt></ruby></strong></p>
<h3 id="font-awesome">Font Awesome</h3>
<p><strong>LoveIt</strong> theme uses <a href="https://fontawesome.com/" target="_blank" rel="noopener noreffer">Font Awesome</a>
 as the icon library.
You can easily use these icons in your articles.</p>
<p>Get the <code>class</code> of icons you wanted from the <a href="https://fontawesome.com/icons?d=gallery" target="_blank" rel="noopener noreffer">Font Awesome website</a>
.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">Gone camping! :(fas fa-campground): Be back soon.

That is so funny! :(far fa-grin-tears):
</code></pre></td></tr></table>
</div>
</div><p>The rendered output looks like this:</p>
<p>Gone camping! <i class="fas fa-campground fa-fw"></i> Be back soon.</p>
<p>That is so funny! <i class="far fa-grin-tears fa-fw"></i></p>
<h3 id="escape-character">Escape character</h3>
<p>In some special cases (when writing this theme documentation <i class="far fa-grin-squint-tears fa-fw"></i>),
your content will conflict with basic or extended Markdown syntax, and it is inevitable.</p>
<p>The escape character syntax can help you build the content you wanted:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{?X} -&gt; X
</code></pre></td></tr></table>
</div>
</div><p>For example, two <code>:</code> will enable emoji syntax, which is not the behavior you want. The escape character syntax is like this:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">{?:}joy:
</code></pre></td></tr></table>
</div>
</div><p>The rendered output looks like this:</p>
<p><strong>:joy:</strong> instead of <strong>😂</strong></p>
<div class="admonition tip">
            <p class="admonition-title"><i class="icon fas fa-lightbulb"></i>Tip</p>
            <div class="admonition-content">This is related to <strong><a href="https://github.com/gohugoio/hugo/issues/4978" target="_blank" rel="noopener noreffer">an issue for Hugo</a>
</strong>, which has not been resolved.</div>
        </div>
<p>Another example is:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">[link{?]}(#escape-character)
</code></pre></td></tr></table>
</div>
</div><p>The rendered output looks like this:</p>
<p><strong>[link](#escape-character)</strong> instead of <strong><a href="#escape-character" rel="noopener noreffer">link</a>
</strong>.</p></div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>The article was updated on 2020-04-19&nbsp;<a class="git-hash" href="https://gitee.com/ainy/ainy/commit/25d5237ea4c355053ecefd674a1ad9ea86b49efe" target="_blank" title="commit by Jie(maybe_happy@163.com) 25d5237ea4c355053ecefd674a1ad9ea86b49efe: init the blog">
                            <i class="fas fa-hashtag fa-fw"></i>25d5237</a></span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"></div>
            <div class="post-info-share">
                <span><a href="javascript:void(0);" title="Share on Twitter" data-sharer="twitter" data-url="https://ainy.gitee.io/en/theme-documentation-content/" data-title="Theme Documentation - Content" data-via="xxxx" data-hashtags="content,markdown"><i class="fab fa-twitter fa-fw"></i></a><a href="javascript:void(0);" title="Share on Facebook" data-sharer="facebook" data-url="https://ainy.gitee.io/en/theme-documentation-content/" data-hashtag="content"><i class="fab fa-facebook-square fa-fw"></i></a><a href="javascript:void(0);" title="Share on Linkedin" data-sharer="linkedin" data-url="https://ainy.gitee.io/en/theme-documentation-content/"><i class="fab fa-linkedin fa-fw"></i></a><a href="javascript:void(0);" title="Share on WhatsApp" data-sharer="whatsapp" data-url="https://ainy.gitee.io/en/theme-documentation-content/" data-title="Theme Documentation - Content" data-web><i class="fab fa-whatsapp fa-fw"></i></a><a href="javascript:void(0);" title="Share on Pinterest" data-sharer="pinterest" data-url="https://ainy.gitee.io/en/theme-documentation-content/" data-description="Find out how to create and organize your content quickly and intuitively in LoveIt theme." data-image="/images/theme-documentation-content/featured-image.jpg"><i class="fab fa-pinterest fa-fw"></i></a><a href="javascript:void(0);" title="Share on Hacker News" data-sharer="hackernews" data-url="https://ainy.gitee.io/en/theme-documentation-content/" data-title="Theme Documentation - Content"><i class="fab fa-hacker-news fa-fw"></i></a></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="https://ainy.gitee.io/en/tags/content">content</a>,&nbsp;<a href="https://ainy.gitee.io/en/tags/markdown">markdown</a></section>
        <section>
            <span><a href="javascript:window.history.back();">Back</a></span>&nbsp;|&nbsp;<span><a href="https://ainy.gitee.io/en/">Home</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="https://ainy.gitee.io/en/basic-markdown-syntax/" class="prev" rel="prev" title="Basic Markdown Syntax"><i class="fas fa-angle-left fa-fw"></i>Basic Markdown Syntax</a>
            <a href="https://ainy.gitee.io/en/theme-documentation-basics/" class="next" rel="next" title="Theme Documentation - Basics">Theme Documentation - Basics<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
<div class="comment"><div id="valine"></div><script>
            document.addEventListener("DOMContentLoaded", function(event) {
                new Valine({
                    el: '#valine',
                    appId: 'QGzwQXOqs5JOhN4RGPOkR2mR-MdYXbMMI',
                    appKey: 'WBmoGyJtbqUswvfLh6L8iEBr',placeholder: 'Your comment ...',verify: true,avatar: 'mp',pageSize: 10,lang: 'en',visitor: true,recordIP: true,});
            });
        </script>
        <noscript>
            Please enable JavaScript to view the <a href="https://valine.js.org/">comments powered by Valine.</a>
        </noscript></div>
    </article></div>
            </main><footer class="footer">
    <div class="copyright"><div class="copyright-line">Powered by <a href="https://gohugo.io/" target="_blank" rel="external nofollow noopener noreffer">Hugo</a> | Theme - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="external nofollow noopener noreffer"><i class="far fa-heart fa-fw"></i> LoveIt</a>
        </div>

        <div class="copyright-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2019 - 2020</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="https://ainy.gitee.io/en/" target="_blank">Jie</a></span>&nbsp;|&nbsp;<span class="license"><a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a></span></div>
    </div>
</footer>
</div><a href="#" class="dynamic-to-top animated faster" id="dynamic-to-top">
            <i class="fas fa-chevron-up fa-fw"></i>
        </a><script>
        document.addEventListener('DOMContentLoaded', function () {
            lightGallery(document.getElementById('content'), {
                selector: '.lightgallery',
                speed: 400,
                hideBarsDelay: 2000,
                thumbnail: true,
                exThumbImage: 'data-thumbnail',
                thumbWidth: 80,
                thumbContHeight: 80,
            });
        });
    </script><script>
        document.addEventListener('DOMContentLoaded', function () {
            renderMathInElement(document.body, {
                delimiters: [
                    { left: '$$', right: '$$', display: true },
                    { left: '\\[', right: '\\]', display: true },{ left: '$', right: '$', display: false },
                    { left: '\\(', right: '\\)', display: false },],
                strict: false,
            });
        });
    </script><link rel="stylesheet" href="https://ainy.gitee.io/lib/valine/valine.css"><link rel="stylesheet" href="https://ainy.gitee.io/lib/lightgallery/lightgallery.min.css"><link rel="stylesheet" href="https://ainy.gitee.io/lib/katex/katex.min.css"><link rel="stylesheet" href="https://ainy.gitee.io/lib/katex/copy-tex.min.css"><script src="https://ainy.gitee.io/lib/valine/Valine.min.js"></script><script src="https://ainy.gitee.io/lib/smooth-scroll/smooth-scroll.polyfills.min.js"></script><script src="https://ainy.gitee.io/lib/sharer/sharer.min.js"></script><script src="https://ainy.gitee.io/lib/lazysizes/lazysizes.min.js"></script><script src="https://ainy.gitee.io/lib/lightgallery/lightgallery.min.js"></script><script src="https://ainy.gitee.io/lib/lightgallery/lg-thumbnail.min.js"></script><script src="https://ainy.gitee.io/lib/lightgallery/lg-zoom.min.js"></script><script src="https://ainy.gitee.io/lib/katex/katex.min.js"></script><script src="https://ainy.gitee.io/lib/katex/auto-render.min.js"></script><script src="https://ainy.gitee.io/lib/katex/copy-tex.min.js"></script><script src="https://ainy.gitee.io/lib/katex/mhchem.min.js"></script><script src="https://ainy.gitee.io/js/theme.min.js"></script></body>
</html>
